// 获取屏幕宽高
const width = document.body.clientWidth,
      height = document.body.clientHeight;
// 1. 使用pixi创建创建，加入DOM容器中
const app = new PIXI.Application({width:1100,height:750});


// 2. 使用pixi.loader加载精灵图
const loader = new PIXI.loaders.Loader(); // you can also create your own if you want
// 精灵图集合
const sprites = {};
// 文本集合
const texts = {};
// 动画集合
const animations = {};
// 动画定时器
let aniIntervals = [];
let progress = 0;
// 时间轴
let timeline = new TimelineMax({
  paused: true
});
// 场景集合
let scene1 = new PIXI.Container();
let scene2 = new PIXI.Container();
scene2.position.x = 1180;
app.stage.addChild(scene1,scene2);
// Chainable `add` to enqueue a resource
loader.add('bg1', './imgs/bg.jpg')
      .add('dot', './imgs/dot.png')
      .add('line', './imgs/line.png')
      .add('eyeOpen', './imgs/eye_open.png')
      .add('eyeClose', './imgs/eye_close.png')
      .add('hand', './imgs/hand.png')
      .add('text', './imgs/text.png')
      .add('boy', './imgs/boy.png')
      .add('bedBoy', './imgs/bed_boy.png')
      .add('bg2', './imgs/bg_2.jpg');
loader.load((loader, resources) => {
    sprites.bg1 = new PIXI.Sprite(resources.bg1.texture);
    sprites.dot = new PIXI.TilingSprite(resources.dot.texture,3200,750);
    sprites.line = new PIXI.TilingSprite(resources.line.texture,3200,750);
    app.ticker.add(function(delta){
      sprites.dot.tilePosition.x -= 1;
      sprites.line.tilePosition.x -= 1;
    })
    sprites.oldMan = new PIXI.extras.AnimatedSprite([resources.eyeOpen.texture,resources.eyeClose.texture]);
    sprites.text = new PIXI.Sprite(resources.text.texture);
    sprites.hand = new PIXI.Sprite(resources.hand.texture);
    sprites.bg2 = new PIXI.Sprite(resources.bg2.texture);
    sprites.boy = new PIXI.Sprite(resources.boy.texture);
    // drawSprites();
});
loader.onProgress.add((target) => {
  document.getElementById('percent').innerText = target.progress+"%";
}); // called once per loaded/errored file
loader.onError.add(() => {}); // called once per errored file
loader.onLoad.add(() => {}); // called once per loaded file
loader.onComplete.add(() => {
  document.getElementById('loading').style.display = 'none';
  document.body.appendChild(app.view);
  loadDone();
});
function loadDone(){
  initBg();
  initTexts();
  initSprites();
  // initAnimate();
  // initTimeline();
  // initTouch();
  // trigger('loadDone');
}
const spritesAnimations = {
  oldMan:[{
    delay:0.1,
    duration: 0.5,
    from:{ alpha: 0},
    to:{alpha: 1}
  },{
    delay:0.2,
    duration: 0.5,
    from:{ rotation: 0},
    to:{rotation: 1}
  }],
  boy:{
    delay:0.3,
    duration:0.5,
    from:{x:0},
    to:{x:400}
  }
}
// 3.1 将精灵图，背景，文本等元素绘制出来
function initBg(){
  // 创建背景
  scene1.addChild(sprites.bg1);
  scene2.addChild(sprites.bg2);
  console.log('initBg');
}
// 3.2 将精灵图，背景，文本等元素绘制出来
function initTexts(){
  console.log('initTexts');
}
// 3.3 将精灵图，背景，文本等元素绘制出来
function initSprites(){
  scene1.addChild(sprites.oldMan);
  scene2.addChild(sprites.boy);
  console.log('initSprites');
}
function initAnimate(obj, animations){
  console.log(animations);
  console.log('initAnimate');
  let action = TweenMax.fromTo(obj, animations.duration, animations.from, animations.to);
  timeline.add(action,0);
  timeline.play();
}
// 4. 用TimelineMax创建一个总的Timeline，初始设置paused为true，可以设定整条Timeline的长度为1.
function initTimeline(){
  console.log(sprites.oldMan,spritesAnimations);
  initAnimate(sprites.oldMan,spritesAnimations.oldMan[0]);
  console.log('initTimeline');
}
// let alloyTouch;
// function initTouch () {
//   const touchOptions = Object.assign({
//     touch: 'body',
//     initialValue: 0, // 起始位置
//     sensitivity: 1, // 不必需,触摸区域的灵敏度，默认值为1，可以为负数
//     maxSpeed: 1, // 不必需，触摸反馈的最大速度限制
//     min: -10580,
//     max: 0,
//     change: touchmove.bind(this)
//   })
//   // console.log(-(Stage.width - (H>W)?H:W));
//   let alloyTouch = new AlloyTouch(touchOptions);
//   function touchmove (val) {
//     stageContainer.position.x = val;
//   }
// }
// let scene1 = new PIXI.Container();
// let scene2 = new PIXI.Container();
// scene2.position.x = scene1.width;
// function drawSprites(){
//   scene1.addChild(sprites.bg1,sprites.dot,sprites.line,sprites.oldMan,sprites.text,sprites.hand);
//   // scene2.addChild(sprites.bg2);
//   app.stage.addChild(scene1);
// }
// // 4. 用TimelineMax创建一个总的Timeline，初始设置paused为true，可以设定整条Timeline的长度为1.
// let timeline = new TimelineMax({tweens:[
//
// ]});

// 5. 用TweenMax创建好过渡动画，然后将TweenMax加入到TimeLine中，duration比如是占10%的话，就设定为0.1
// let
//    从滚动到30%开始播放动画的话，delay就设置为0.3
// 6. 用AlloyTouch创建滚动监听，并设置好滚动高度，例如1000
// 7. 监听AlloyTouch的change事件，用当前滚动值/滚动高度 得到当前页面的进度
// 8. 调用总Timeline的seek方法，寻找当前页面进度的地方，可以简单理解为拨动动画进度条
const touchOptions = Object.assign({
  touch: 'body',
  initialValue: 0, // 起始位置
  sensitivity: 1, // 不必需,触摸区域的灵敏度，默认值为1，可以为负数
  maxSpeed: 1, // 不必需，触摸反馈的最大速度限制
  min: -10580,
  max: 0,
  change: touchmove.bind(this)
})
// console.log(-(Stage.width - (H>W)?H:W));
let alloyTouch = new AlloyTouch(touchOptions);
function touchmove (val) {
  // stageContainer.position.x = val;
  // tearParper();
}
